<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Cool Buttons</title>
		<style media="" data-href="https://fonts.googleapis.com/css?family=Lato:400,300italic">/* latin-ext */
		@font-face {
		  font-family: 'Lato';
		  font-style: italic;
		  font-weight: 300;
		  src: url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2_FQft1dw.woff2) format('woff2');
		  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
		}
		/* latin */
		@font-face {
		  font-family: 'Lato';
		  font-style: italic;
		  font-weight: 300;
		  src: url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2_Gwft.woff2) format('woff2');
		  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
		}
		/* latin-ext */
		@font-face {
		  font-family: 'Lato';
		  font-style: normal;
		  font-weight: 400;
		  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
		  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
		}
		/* latin */
		@font-face {
		  font-family: 'Lato';
		  font-style: normal;
		  font-weight: 400;
		  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
		  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
		}
		</style>
		<link rel="stylesheet" href="./CoolButtons.css"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	</head>
	<body>
		<div class="header">
			<h1>Gradient Buttons</h1>
		</div>
		<div class="content">
		  
		  <h2>Colors</h2>
		  <ul class="color">
		    <li class="green"></li>
		    <li class="blue"></li>
		    <li class="red"></li>			
		    <li class="purple"></li>
		    <li class="cyan"></li>
		    <li class="yellow"></li>
		  </ul>
			<div class="container">
				<h2>mini</h2>
				<a href="#" class="btn-gradient cyan mini">Button</a>
				<a href="#" class="btn-gradient orange mini">Button</a>
				<a href="#" class="btn-gradient blue mini">Button</a>
				<a href="#" class="btn-gradient purple mini">Button</a>
				<a href="#" class="btn-gradient green mini">Button</a>
				<a href="#" class="btn-gradient yellow mini">Button</a>
				<a href="#" class="btn-gradient red mini">Button</a>
		
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red mini"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>small</h2>
				<a href="#" class="btn-gradient cyan small">Button</a>
				<a href="#" class="btn-gradient orange small">Button</a>
				<a href="#" class="btn-gradient blue small">Button</a>
				<a href="#" class="btn-gradient purple small">Button</a>
				<a href="#" class="btn-gradient green small">Button</a>
				<a href="#" class="btn-gradient yellow small">Button</a>
				<a href="#" class="btn-gradient red small">Button</a>
		
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red small"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>normal</h2>
				<a href="#" class="btn-gradient cyan">Button</a>
				<a href="#" class="btn-gradient orange">Button</a>
				<a href="#" class="btn-gradient blue">Button</a>
				<a href="#" class="btn-gradient purple">Button</a>
				<a href="#" class="btn-gradient green">Button</a>
				<a href="#" class="btn-gradient yellow">Button</a>
				<a href="#" class="btn-gradient red">Button</a>
		
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>large</h2>
				<a href="#" class="btn-gradient cyan large">Button</a>
				<a href="#" class="btn-gradient orange large">Button</a>
				<a href="#" class="btn-gradient blue large">Button</a>
				<a href="#" class="btn-gradient purple large">Button</a>
				<a href="#" class="btn-gradient green large">Button</a>
				<a href="#" class="btn-gradient yellow large">Button</a>
				<a href="#" class="btn-gradient red large">Button</a>
		
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red large"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>block</h2>
				<a href="#" class="btn-gradient cyan block">Block Button</a>
				<a href="#" class="btn-gradient orange block">Block Button</a>
				<a href="#" class="btn-gradient blue block">Block Button</a>
				<a href="#" class="btn-gradient purple block">Block Button</a>
				<a href="#" class="btn-gradient green block">Block Button</a>
				<a href="#" class="btn-gradient yellow block">Block Button</a>
				<a href="#" class="btn-gradient red block">Block Button</a>
		
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red block"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		</div>
		
		
		<div class="header">
			<h1>.btn-two</h1>
		</div>
		<div class="content">
		<section>
			<div class="container">
				<h2>mini</h2>
				<a href="#" class="btn-two green mini">Button</a>
				<a href="#" class="btn-two blue mini">Button</a>
				<a href="#" class="btn-two red mini">Button</a>
				<a href="#" class="btn-two purple mini">Button</a>
				<a href="#" class="btn-two cyan mini">Button</a>
				<a href="#" class="btn-two yellow mini">Button</a>
		
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green mini"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>small</h2>
				<a href="#" class="btn-two green small">Button</a>
				<a href="#" class="btn-two blue small">Button</a>
				<a href="#" class="btn-two red small">Button</a>
				<a href="#" class="btn-two purple small">Button</a>
				<a href="#" class="btn-two cyan small">Button</a>
				<a href="#" class="btn-two yellow small">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green small"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>normal</h2>
				<a href="#" class="btn-two green">Button</a>
				<a href="#" class="btn-two blue">Button</a>
				<a href="#" class="btn-two red">Button</a>
				<a href="#" class="btn-two purple">Button</a>
				<a href="#" class="btn-two cyan">Button</a>
				<a href="#" class="btn-two yellow">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>large</h2>
				<a href="#" class="btn-two green large">Button</a>
				<a href="#" class="btn-two blue large">Button</a>
				<a href="#" class="btn-two red large">Button</a>
				<a href="#" class="btn-two purple large">Button</a>
				<a href="#" class="btn-two cyan large">Button</a>
				<a href="#" class="btn-two yellow large">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green large"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			<div class="container">
				<h2>rounded</h2>
				<a href="#" class="btn-two green rounded">Button</a>
				<a href="#" class="btn-two blue rounded">Button</a>
				<a href="#" class="btn-two red rounded">Button</a>
				<a href="#" class="btn-two purple rounded">Button</a>
				<a href="#" class="btn-two cyan rounded">Button</a>
				<a href="#" class="btn-two yellow rounded">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green rounded"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
			<div class="container">
				<h2>block</h2>
				<a href="#" class="btn-two green block">Button</a>
				<a href="#" class="btn-two blue block">Button</a>
				<a href="#" class="btn-two red block">Button</a>
				<a href="#" class="btn-two purple block">Button</a>
				<a href="#" class="btn-two cyan block">Button</a>
				<a href="#" class="btn-two yellow block">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green block"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		</section>
		</div>
		
		<div class="header">
			<h1>Default Buttons</h1>
		</div>
		<div class="content">
			<section>
		
			<div class="container">
				<h2>mini</h2>
				<a href="#" class="btn green mini">Button</a>
				<a href="#" class="btn blue mini">Button</a>
				<a href="#" class="btn red mini">Button</a>
				<a href="#" class="btn purple mini">Button</a>
				<a href="#" class="btn cyan mini">Button</a>
				<a href="#" class="btn yellow mini">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green mini"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			<div class="container">
				<h2>small</h2>
				<a href="#" class="btn green small">Button</a>
				<a href="#" class="btn blue small">Button</a>
				<a href="#" class="btn red small">Button</a>
				<a href="#" class="btn purple small">Button</a>
				<a href="#" class="btn cyan small">Button</a>
				<a href="#" class="btn yellow small">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green small"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			<div class="container">
				<h2>normal</h2>
				<a href="#" class="btn green">Button</a>
				<a href="#" class="btn blue">Button</a>
				<a href="#" class="btn red">Button</a>
				<a href="#" class="btn purple">Button</a>
				<a href="#" class="btn cyan">Button</a>
				<a href="#" class="btn yellow">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			<div class="container">
				<h2>large</h2>
				<a href="#" class="btn green large">Button</a>
				<a href="#" class="btn blue large">Button</a>
				<a href="#" class="btn red large">Button</a>
				<a href="#" class="btn purple large">Button</a>
				<a href="#" class="btn cyan large">Button</a>
				<a href="#" class="btn yellow large">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green large"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			<div class="container">
				<h2>rounded</h2>
				<a href="#" class="btn green rounded">Button</a>
				<a href="#" class="btn blue rounded">Button</a>
				<a href="#" class="btn red rounded">Button</a>
				<a href="#" class="btn purple rounded">Button</a>
				<a href="#" class="btn cyan rounded">Button</a>
				<a href="#" class="btn yellow rounded">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green rounded"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			<div class="container">
				<h2>block</h2>
				<a href="#" class="btn green block">Button</a>
				<a href="#" class="btn blue block">Button</a>
				<a href="#" class="btn red block">Button</a>
				<a href="#" class="btn purple block">Button</a>
				<a href="#" class="btn cyan block">Button</a>
				<a href="#" class="btn yellow block">Button</a>
				<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d green"</span>>Button&lt;/<span class="anc">a</span>></pre>
			</div>
		
			</section>
		</div>
		
		
		<div class="header">
			<h1>3D Buttons</h1>
		</div>
		<div class="content-3d">
		
		<div class="btn-container">
			<a href="#" class="btn-3d green">Button</a>
			<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d green"</span>>Button&lt;/<span class="anc">a</span>></pre>
		</div>
		
		<div class="btn-container">
			<a href="#" class="btn-3d blue">Button</a>
			<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d blue"</span>>Button&lt;/<span class="anc">a</span>></pre>
		</div>
		
		<div class="btn-container">
			<a href="#" class="btn-3d red">Button</a>
			<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d red"</span>>Button&lt;/<span class="anc">a</span>></pre>
		</div>
		
		<div class="btn-container">
			<a href="#" class="btn-3d purple">Button</a>
			<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d purple"</span>>Button&lt;/<span class="anc">a</span>></pre>
		</div>
		<div class="btn-container">
			<a href="#" class="btn-3d cyan">Button</a>
			<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d cyan"</span>>Button&lt;/<span class="anc">a</span>></pre>
		</div>
		<div class="btn-container">
			<a href="#" class="btn-3d yellow">Button</a>
			<pre>&lt;<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d yellow"</span>>Button&lt;/<span class="anc">a</span>></pre>
		</div>
		</div>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="./CoolButtons.js"></script>
	</body>
</html>